<!--
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-05-21 16:15:25
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-05-21 17:47:46
 * @FilePath: \project\record-work-time\src\pages\index\component\header.vue
 * @Description: 
-->
<template>
    <view class="header-component">
        <view class="placeholder" :style="{ height: getStatusBarHeight() + 'px' }"></view>
        <view class="title" :style="{ height: getTitleBarHeight() + 'px' }">{{ title }}</view>
        <view class="time-wrap">
            <view class="time-day">{{ timeData.day }}</view>
            <view class="time-left-warp">
                <view class="year-mouth">{{ timeData.year }}年{{ timeData.month }}月</view>
                <view class="week">{{ timeData.week }}</view>
            </view>
            <view class="pic-bg"></view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getTitleBarHeight, getStatusBarHeight } from "../../../utils/system.js"
import { getCurrentDayOfWeek, getCurrentTime } from "../../../utils/tools"

let title = ref(`xxx项目记录工时`)

const timeData = reactive({
    year: getCurrentTime('year'),
    month: getCurrentTime('month'),
    day: getCurrentTime('day'),
    week: getCurrentDayOfWeek(),
    titleBarHeight: getTitleBarHeight(),
    statusBarHeight: getStatusBarHeight()
})


</script>

<style lang="scss" scoped>
.header-component {
    height: 350rpx;

    .title {
        display: flex;
        align-items: center;
        padding-left: 40rpx;
        font-size: 38rpx;
        color: #333333;
    }

    .time-wrap {
        display: flex;
        align-items: center;
        padding-left: 40rpx;
        position: relative;

        .time-day {
            font-size: 110rpx;
            font-weight: bolder;
        }

        .time-left-warp {
            .year-mouth {
                font-size: 30rpx;
            }

            .week {
                font-size: 40rpx;
                font-weight: bolder;
            }
        }

        .pic-bg {
            background: url("../../../static/headPic.png") no-repeat;
            background-size: 85% 85%;
            width: 200rpx;
            height: 200rpx;
            position: absolute;
            right: 80rpx;
            top: 0rpx;
            opacity: 0.64;
        }
    }
}
</style>